$(document).ready(function(){
    var $banner=$("header .banner");
    var $header=$("header");
    var height=$(window).height();
    var width=$(window).width();
    height=height>858?858:height;
    height=height<640?640:height;
    width=width>height*2&&width>1366? height*2: width;
    $header.height(height);
    $header.width(width);
    $banner.height(height);
    BannerUpdate();
});
function BannerUpdate(picLength){
    // slide 图片滑动代码
    var $banner=$(".banner");
    var sWidth = $banner.width(); //获取焦点图的宽度（显示面积）
    picLength=isNaN(Number(picLength))? $banner.find("ul.banner-slides li").length: Number(picLength);
    //获取焦点图个数
    var index = 0;
    var picTimer;
    var ifPlay=true;

    // 设置宽高
    /*$banner.find("ul li").css({
        width:$banner.css("width"),
        height:$banner.css("height")
    });*/

    //还有上一页、下一页两个按钮
    /*$banner.find(".preNext").remove();
    if(picLength<=0) return;*/

    //上一页、下一页按钮透明度处理
    /*$banner.find(".preNext").css("opacity",0.2).hover(function() {
        $(this).stop(true,false).animate({"opacity":"0.5"},300);
    },function() {
        $(this).stop(true,false).animate({"opacity":"0.2"},300);
    });*/

    //上一页按钮
    $banner.find(".pre").click(function() {
        index -= 1;
        if(index == -1) {index = picLength - 1;}
        showPics(index);
    });
    //下一页按钮
    $banner.find(".next").click(function() {
        index += 1;
        if(index >= picLength) {index = 0;}
        showPics(index);
    });

    //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
    $banner.find("ul.banner-slides").css("width",sWidth * (picLength));

    //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
    function autoPlay(){
        if(ifPlay){
            picTimer = setInterval(function() {
                if(++index == picLength) {index = 0;}
                showPics(index);
            },4000); //此4000代表自动播放的间隔，单位：毫秒
        }
    }
    // autoPlay();
    $banner.hover(function() {
        clearInterval(picTimer);
    },autoPlay).trigger("mouseleave");

    //显示图片函数，根据接收的index值显示相应的内容
    function showPics(index) { //普通切换
        var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
        $banner.find(" ul.banner-slides").stop(true,false).animate({"left":nowLeft},1000); //通过animate()调整ul元素滚动到计算出的position
    }
}